<!doctype html>
<link href='dist/rome.css' rel='stylesheet' type='text/css' />
<link href='example/example.css' rel='stylesheet' type='text/css' />
<title>Rome</title>
<h1>Rome</h1>
<h3>Customizable date <em>(and time)</em> picker. Opt-in UI, no jQuery!</h3>
<a href='https://github.com/bevacqua/rome'>
  <img class='gh-fork' src='https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png' />
</a>
<div class='examples'>
  <div class='parent'>
    <label for='dt'>Pick a date and a time: </label>
    <input id='dt' class='input'>
    <pre>
      <code>
rome(input);
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='dt'>Works just fine with initial values! </label>
    <input id='ivi' class='input' value='2014-12-15 21:00' />
    <input id='ivp' class='input' />
    <pre>
      <code>
&lt;input id=&#39;input&#39; class=&#39;input&#39; value=&#39;2014-12-15 21:00&#39; /&gt;
&lt;input id=&#39;inputTwo&#39; class=&#39;input&#39; /&gt;

rome(input);
rome(inputTwo, { initialValue: '2014-12-08 08:36' });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='sm'>Weeks starting on monday: </label>
    <input id='sm' class='input' />
    <pre>
      <code>
rome(input, { weekStart: 1 });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='d'>Pick a date: </label>
    <input id='d' class='input' />
    <pre>
      <code>
rome(input, { time: false });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='t'>Pick a time: </label>
    <input id='t' class='input' />
    <pre>
      <code>
rome(input, { date: false });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='mms'>Want to display two contiguous months instead of just one?</label>
    <input id='mms' class='input' />
    <pre>
      <code>
rome(input, { monthsInCalendar: 2 });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='ind'>Remove and restore <code>rome</code> at will: </label>
    <input id='ind' class='input' />
    <button id='toggle'>Destroy <code>rome</code> instance!</button>
    <pre>
      <code>
var picker = rome(input); // rome.find(input) also returns picker

toggle.addEventListener('click', function () {
  if (picker.destroyed) {
    picker.restore();
  } else {
    picker.destroy();
  }
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='mm'>Pick a date between <em>2013-12-30</em> and <em>2014-10-01</em>: </label>
    <input id='mm' class='input' />
    <pre>
      <code>
rome(input, { min: '2013-12-30', max: '2014-10-01' });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='mmt'>It works great with specific date and time too! </label>
    <input id='mmt' class='input' />
    <pre>
      <code>
rome(input, { min: '2014-04-30 19:45', max: '2014-09-01 08:30' });
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='iwe'>Tired of people thinking saturdays are <code>'valid'</code> dates? </label>
    <input id='iwe' class='input' />
    <pre>
      <code>
rome(input, {
  dateValidator: function (d) {
    return moment(d).day() !== 6;
  }
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='win'>Winter doesn't meet your fancy? </label>
    <input id='win' class='input' />
    <pre>
      <code>
rome(input, {
  dateValidator: function (d) {
    var m = moment(d);
    var y = m.year();
    var f = 'MM-DD';
    var start = moment('12-21', f).year(y).startOf('day');
    var end = moment('03-19', f).year(y).endOf('day');
    return m.isBefore(start) && m.isAfter(end);
  }
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label for='tim'>Sure enough, it also allows you to define specific time ranges </label>
    <input id='tim' class='input' />
    <pre>
      <code>
rome(input, {
  timeValidator: function (d) {
    var m = moment(d);
    var start = m.clone().hour(12).minute(59).second(59);
    var end = m.clone().hour(18).minute(0).second(1);
    return m.isAfter(start) && m.isBefore(end);
  }
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <label class='block' for='inl'>Did I mention you can use Rome inline as well? Just give it a non-input element!</label>
    <div class='inline' id='inl'></div>
    <div class='inline' id='inlvc'>Value: <span id='inlv' class='inline'>(choose)</span></div>
    <pre>
      <code>
&lt;div id=&#39;parent&#39;&gt;&lt;/div&gt;
&lt;div id=&#39;result&#39;&gt;(choose)&lt;/div&gt;

rome(parent).on('data', function (value) {
  result.innerText = value;
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <p>Range between two inputs? Sure!</p>
    <input id='left' class='input' />
    <input id='right' class='input' />
    <pre>
      <code>
rome(left, {
  dateValidator: rome.val.beforeEq(right)
});

rome(right, {
  dateValidator: rome.val.afterEq(left)
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <p>Inline? No problem!</p>
    <div class='inline' id='leftInline'></div>
    <div class='inline' id='rightInline'></div>
    <pre>
      <code>
rome(left, {
  dateValidator: rome.val.beforeEq(right)
});

rome(right, {
  dateValidator: rome.val.afterEq(left)
});
      </code>
    </pre>
  </div>
  <div class='parent'>
    <p>Specific dates? Use these shortcuts!</p>
    <p>You can use moments, <code>Date</code> objects, or strings. You're allowed to specify a single date, a date range, an array of specific dates, an array of date ranges, or a combination of those.</p>
    <p>Oh, you can also reference calendars. Then, the selected date in that calendar is excluded (or the only option) in the validated calendar.</p>
    <div class='inline' id='exa'></div>
    <div class='inline' id='exb'></div>
    <div class='inline' id='exc'></div>
    <div class='inline' id='exd'></div>
    <div class='inline' id='exe'></div>
    <div class='inline' id='exf'></div>
    <pre>
      <code>
rome(first, {
  dateValidator: rome.val.except('2014-08-01')
});

rome(second, {
  dateValidator: rome.val.except('2014-08-02', '2014-08-06')
});

rome(third, {
  dateValidator: rome.val.except(['2014-08-04', '2014-08-09'])
});

rome(fourth, {
  dateValidator: rome.val.except([
    ['2014-08-03', '2014-08-07'], '2014-08-15'
  ])
});

rome(fifth, {
  dateValidator: rome.val.only([
    ['2014-08-01', '2014-08-15'], '2014-08-22'
  ])
});

rome(sixth, {
  dateValidator: rome.val.except([second, fourth, '2014-08-15'])
});
      </code>
    </pre>
  </div>
</div>
<h3>Get it on GitHub! <a href='https://github.com/bevacqua/rome'>bevacqua/rome</a></h3>
<script src='dist/rome.js'></script>
<script src='example/example.js'></script>
